.order-detail {
	background-color: #f4f4f4;
}

#map {
	// position: fixed;
	// top: 0;
	// left: 0;
	// right: 0;
	width: 750rpx;
	height: 80vh;
}

@for $i from 1 through 10 {
	.pd-l-#{$i * 5} {
		width: $i * 10px;
	}
}

$list:0 5 10 15 20 25 30 35 40 45 50 55;
@each $i in $list {
	.pd-l-#{$i} {
		padding-left: #{$i}rpx;
	}
	.pd-t-#{$i} {
		padding-top: #{$i}rpx;
	}
	.pd-b-#{$i} {
		padding-bottom: #{$i}rpx;
	}
	.pd-r-#{$i} {
		padding-right: #{$i}rpx;
	}
	.pd-#{$i} {
		padding: #{$i}rpx;
	}
	.mg-#{$i} {
		margin: #{$i}rpx;
	}
	.mg-l-#{$i} {
		margin-left: #{$i}rpx;
	}
	.mg-t-#{$i} {
		margin-top: #{$i}rpx;
	}
	.mg-b-#{$i} {
		margin-bottom: #{$i}rpx;
	}
	.mg-r-#{$i} {
		margin-right: #{$i}rpx;
	}
}
.mg-l-a {
	margin-left: auto;
}

.card {
	margin-left: auto;
	margin-right: auto;
	width: 690rpx;
	background: #ffffff;
	box-shadow: 15rpx 26rpx 42rpx 8rpx #eceef0;
	border-radius: 12rpx;
	padding: 20rpx 41rpx;

	&-title {
		text-align: center;
		font-size: 38rpx;
		font-family: PingFang SC;
		font-weight: 600;
		color: #282828;
		line-height: 40rpx;
		image {
			vertical-align: middle;
			width: 60rpx;
			height: 60rpx;
			margin-right: 15rpx;
		}
	}

	&-subtitle {
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #4b4b4b;
		line-height: 36rpx;

		& > .time {
			color: #ee3b32;
		}
	}

	&-desc {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #b5b5b5;
		line-height: 36rpx;
		word-break: break-all;
	}

	&-btn {
		width: 290rpx;
		height: 91rpx;
		background: linear-gradient(90deg, #4aabf6, #4675f6);
		box-shadow: 0rpx 16rpx 30rpx 0rpx rgba(74, 169, 246, 0.2);
		border-radius: 45rpx;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 91rpx;
		color: #ffffff;

		
		&::after {
			border-color: transparent;
			border-radius: 90rpx;
		}

		&.plain {
			color: #4b4b4b;
			background: #ffffff;
			box-shadow: none;

			&::after {
				border-color: #cccccc;
			}
		}
	}

	&-icon-copy {
		width: 28rpx;
		height: 28rpx;
		vertical-align: middle;
	}

	&-info {
		width: 100%;
		display: inline-flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;

		&-label {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #4b4b4b;
			line-height: 36rpx;
		}

		&-value {
			margin-left: auto;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #282828;
			line-height: 36rpx;

			& > text {
				color: #ee3b32;
				font-size: 32rpx;
			}
		}
	}
}

.back {
	height: 56rpx;
	width: 56rpx;
	position: fixed;
	left: 30rpx;
	top: 99rpx; // calc(env(safe-area-inset-top) + 90rpx);
	z-index: 9999;
}

.list {
	&-icon-copy {
		width: 28rpx;
		height: 28rpx;
		vertical-align: middle;
	}

	&-info {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;

		&-label {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #4b4b4b;
			line-height: 36rpx;
		}

		&-value {
			margin-left: auto;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #282828;
			line-height: 36rpx;

			& > text {
				color: #ee3b32;
				font-size: 32rpx;
			}
		}
	}
}

.detail {
	&-title {
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 600;
		color: #282828;
		line-height: 40rpx;
		padding: 0 41rpx;
	}

	&-category {
		padding-top: 50rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #4b4b4b;
		line-height: 50rpx;
	}

	&-address {
		border-bottom: 1rpx #eaeaea solid;
		padding-bottom: 50rpx;
	}

	&-icon {
		margin-right: 16rpx;
		text-align: center;
		display: inline-block;
		vertical-align: middle;
		width: 40rpx;
		height: 40rpx;
		border-radius: 8rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #ffffff;
		line-height: 38rpx;
	}

	&-take {
		display: flex;
		align-items: center;
		margin-bottom: 28rpx;

		.detail-icon {
			background: #4e95fc;
		}
	}

	&-receive {
		display: flex;
		align-items: center;

		.detail-icon {
			background: #ffca3b;
		}
	}
}
